<template>
  <div class="pages">
    <h1 class="directory">目录</h1>
    <template v-for="(item,index) in routes">
      <p class="router" v-if="index !== routes.length-1"  @click="changePage(item)"  :key="index">
          <el-link type="primary">{{ (item.meta && item.meta.title) || item.name }}</el-link>
      </p>
    </template>
  </div>
</template>

<script lang="ts">
import {useRouter, RouteRecordRaw} from 'vue-router'
import {reactive, onMounted, toRefs} from 'vue'

export default {
  setup() {
    let data = reactive<{
      routes: RouteRecordRaw[]
    }>({
      routes: []
    })
    let router = useRouter()
    onMounted(() => {
      // 确保 Router.options.routes 存在且不为空
      if (router.options.routes) {
        // 现在可以安全地将 RouteRecordRaw[] 类型的数组赋值给 data.routes
        // data.routes = [...router.options.routes];
        data.routes = [...router.getRoutes()];
      }
    })

    const changePage = (item: any) => {
      router.push(item.path)
    }

    return {
      ...toRefs(data),
      changePage
    };
  },
}
</script>

<style lang="less" scoped>
.pages {
  padding: 15px 20px;

  .directory {
    font-size: 30px;
    line-height: 1.5;
    border-bottom: 2px solid #888;
  }

  //.router {
  //  font-size: 20px;
  //  line-height: 2;
  //  color: #646cff;
  //  border-bottom: 2px dashed #888;
  //  cursor: pointer;
  //}
}
</style>